<template>
  <div id="login">
    <el-dialog :visible="showLogin" :center="true" @close="onClose()">
      <div class="login_k">
        <div class="speed_login">
          <p :class="this.speed_login?'border-bottom ':''" @click="changeMlogin">密码登录</p>
          <p :class="this.speed_login?' ':'border-bottom'" @click="changeLogin">快捷登录</p>
        </div>
        <ul>
          <li class="uname">
            <input type="text" placeholder="输入手机号" v-model="mobile" />
            <p v-focus v-show="mobile_err">手机号格式不正确</p>
          </li>

          <li class="upwd" v-show="speed_login">
            <input
              type="password"
              placeholder="8-16位密码,区分大小写"
              @keyup.enter="login"
              v-model="logpwd"
            />
            <p v-focus v-show="logpwd_err">密码输入错误</p>
          </li>
          <!--  -->
          <li class="upwd" v-show="!speed_login">
            <input
              placeholder="输入验证码"
              type="text"
              style="width:240px;height:45px;"
              v-model="yzm_login"
            />
            <span class="yzm">
              <span v-show="yzmLogin_show" @click="getCode_login" class="yzm_blue">获取验证码</span>
              <span v-show="!yzmLogin_show" class="count yzm_color">获取验证码{{ yzmLogincount }} s</span>
            </span>
          </li>

          <li class="button">
            <p class="dl_bg" @click="speed_login==true?login():speedLogin()">登录</p>
          </li>
          <li class="forget">
            <p @click="forget">忘记密码</p>
            <p @click="zhuce">注册会员</p>
          </li>
        </ul>
        <!-- <div class="three">
          <p>第三方登录</p>
        </div>
        <ul class="way">
          <li>
            <img src="../../assets/image/login/weibo.png" alt="" />
          </li>
          <li>
            <img src="../../assets/image/login/zhifubao.png" alt="" />
          </li>
          <li>
            <img src="../../assets/image/login/weixin.png" alt="" />
          </li>
          <li>
            <img src="../../assets/image/login/qq.png" alt="" />
          </li>
        </ul>-->
      </div>
    </el-dialog>
    <!-- 忘记密码 -->
    <el-dialog id="login_k" :title="title" :visible="upwd_show" :center="true" @close="onClose2()">
      <!-- 手机号找回 -->
      <div class="login_k" v-show="show">
        <ul class="Retrieve_password_phone">
          <li>
            <input type="text" v-model="sj_mobile" placeholder="输入手机号" />
            <p v-show="mobile_err">手机号格式不正确</p>
          </li>
          <li>
            <input type="text" v-model="sj_yzm" placeholder="验证码" />
            <span class="yzm">
              <span v-show="yzm_show" @click="getCode" class="yzm_blue">获取验证码</span>
              <span v-show="!yzm_show" class="count yzm_color">获取验证码{{ count }} s</span>
            </span>
          </li>
          <li>
            <input type="password" v-model="sj_pswd" placeholder="新密码" />
          </li>
          <li>
            <input type="password" v-model="sj_pswd2" placeholder="确认新密码" />
          </li>
          <li class="button">
            <p class="dl_bg" @click="sj_submit">提交</p>
          </li>
          <li class="forget">
            <p></p>
            <p @click="toemail">邮箱接收验证码</p>
          </li>
        </ul>
      </div>
      <!--  -->
      <div class="login_k" v-show="!show">
        <ul class="Retrieve_password_phone">
          <li>
            <input type="text" v-model="yx_email" placeholder="输入邮箱号" />
            <p v-show="mobile_err">手机号格式不正确</p>
          </li>
          <li>
            <input type="text" v-model="yx_yzm" placeholder="验证码" />
            <span class="yzm">
              <span v-show="yx_yzm_show" @click="yx_getCode" class="yzm_blue">获取验证码</span>
              <span v-show="!yx_yzm_show" class="count yzm_color">获取验证码{{ yx_count }} s</span>
            </span>
          </li>
          <li>
            <input type="password" v-model="yx_pswd" placeholder="新密码" />
          </li>
          <li>
            <input type="password" v-model="yx_pswd2" placeholder="确认新密码" />
          </li>
          <li class="button">
            <p class="dl_bg" @click="yx_submit2">提交</p>
          </li>
          <li class="forget">
            <p></p>
            <p @click="tophone">手机号接收验证码</p>
          </li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  // props:["dialogVisible"],
  data() {
    return {
      mobile: "",
      mobile_err: false,
      logpwd: "",
      logpwd_err: false,
      upwd_show: false,
      speed_login: true, //密码登录还是验证码登录的显示
      show: true, //手机号的框显示还是 邮箱的显示
      yzm_show: true,
      yx_yzm_show: true,
      yzmLogin_show: true,
      title: "手机号找回密码",
      count: "", //手机验证码
      yzmLogincount: "", //登录验证吗
      yzm_login: "", //
      sj_mobile: "",
      sj_pswd: "",
      sj_yzm: "",
      sj_pswd2: "",
      yx_count: "", //邮箱验证码
      yx_email: "",
      yx_pswd: "",
      yx_yzm: "",
      yx_pswd2: "",
    };
  },

  computed: {
    ...mapState(["showLogin"]),
  },

  methods: {
    ...mapActions(["isShow", "isHide", "isLoGin"]),
    // 关闭登录窗口
    onClose() {
      this.isHide();
      this.mobile = "";
      this.logpwd = "";
      this.yzm_login = "";
      this.speed_login = true;
    },
    // 关闭忘记密码窗口
    onClose2() {
      this.upwd_show = false;
      this.show = true;
      this.title = "手机号回密码";
    },
    forget() {
      this.isHide();

      this.upwd_show = true;
      this.show = true;
      this.sj_yzm = "";
      this.sj_mobile = "";
      this.sj_pswd = "";
      this.sj_pswd2 = "";
    },
    zhuce() {
      this.$router
        .push({
          path: `/regist`,
        })
        .catch((err) => {
          err;
        });
      this.isHide();
    },
    toemail() {
      this.show = false;
      this.title = "邮箱找回密码";
      this.yx_yzm = "";

      this.yx_email = "";
      this.yx_pswd = "";
      this.yx_pswd2 = "";
    },
    tophone() {
      this.show = true;
      this.title = "手机号回密码";
    },
    changeLogin() {
      this.speed_login = false;
      this.mobile = "";
    },
    changeMlogin() {
      this.speed_login = true;
      this.mobile = "";
    },
    //登录的验证码
    getCode_login() {
      this.$api
        .post(
          this.zs +
            "/gateway/mas/send/sms?func=usrLoginByMobile&mobile=" +
            this.mobile
        )
        .then((res) => {
          if (res.data.success == true) {
            this.$message({
              message: "手机验证码发送成功",
              type: "success",
              duration: 800,
              offset: 320,
            });
            const TIME_COUNT = 60;
            this.yzmLogin_show = false;
            if (!this.timer) {
              this.yzmLogincount = TIME_COUNT;

              this.timer = setInterval(() => {
                if (
                  this.yzmLogincount > 0 &&
                  this.yzmLogincount <= TIME_COUNT
                ) {
                  this.yzmLogincount--;
                } else {
                  this.yzmLogin_show = true;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000);
            }
          } else {
            this.$message({
              message: res.data.msgDetail,
              type: "error",
              duration: 900,
              offset: 320,
            });
          }
        });
    },
    //获取手机 的验证码
    getCode() {
      this.$api
        .post(
          this.zs +
            "/gateway/mas/send/sms?func=usrForgetByMobile&mobile=" +
            this.sj_mobile
        )
        .then((res) => {
          if (res.data.success == true) {
            this.$message({
              message: "手机验证码发送成功",
              type: "success",
              duration: 800,
              offset: 320,
            });
            this.yzm_show = false;
            const TIME_COUNT = 60;
            if (!this.timer) {
              this.count = TIME_COUNT;

              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.yzm_show = true;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000);
            }
          } else {
            this.$message({
              message: res.data.msgDetail,
              type: "error",
              duration: 900,
              offset: 320,
            });
          }
        });
    },
    // //获取邮箱验证
    yx_getCode() {
      this.$api
        .post(this.zs + "/live/forget/pwd/email?email=" + this.yx_email)
        .then((res) => {
          if (res.data.success == true) {
            this.$message({
              message: "验证码获取成功",
              type: "success",
              duration: 1000,
              offset: 320,
            });
            this.yx_yzm_show = false;
            const TIME_COUNT = 60;
            if (!this.timer) {
              this.yx_count = TIME_COUNT;

              this.timer = setInterval(() => {
                if (this.yx_count > 0 && this.yx_count <= TIME_COUNT) {
                  this.yx_count--;
                } else {
                  this.yx_yzm_show = true;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000);
            }
          } else {
            this.$message({
              message: res.data.msgDetail,
              type: "error",
              duration: 900,
              offset: 320,
            });
          }
        });
    },
    login() {
      localStorage.clear();
      var u = this.mobile;
      var p = this.logpwd;
      let mima = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
      let num = /^[1]([3-9])[0-9]{9}$/;
      if (!num.test(u)) {
        this.$message({
          message: "电话号码有误请重新填写",
          type: "error",
          duration: 1000,
          offset: 200,
        });
        return;
      }
      if (!mima.test(p)) {
        this.$message({
          message: "密码有误请重新填写",
          type: "error",
          duration: 1000,
          offset: 320,
        });
        return;
      }
      if (!this.logpwd) {
        this.logpwd_err = true;
      } else {
        this.logpwd_err = false;
      }
      var u = this.mobile;
      var p = this.logpwd;
      // var obj={uname:u,upwd:p}
      this.$api
        .post(this.zs + "/live/login?mobile=" + u + "&logpwd=" + p)
        .then((res) => {
          if (res.data.success == true) {
            (this.mobile = ""),
              (this.logpwd = ""),
              this.$message({
                message: "登录成功",
                type: "success",
                duration: 1000,
                offset: 320,
              });
            localStorage.setItem("token", res.data.data);
            this.$store.commit("setIsLogin", true);
            // location.reload()
            this.$router.push("/").catch((err) => {
              err;
            });
            this.isHide();
          } else {
            this.$message({
              message: res.data.msgDetail,
              type: "error",
              duration: 1000,
              offset: 320,
            });
            this.logpwd = "";
          }
        });
    },
    speedLogin() {
      localStorage.clear();
      var u = this.mobile;
      var y = this.yzm_login;
      let num = /^[1]([3-9])[0-9]{9}$/;
      if (!num.test(u)) {
        this.$message({
          message: "电话号码有误请重新填写",
          type: "error",
          duration: 1000,
          offset: 200,
        });
        return;
      }
      this.$api
        .post(this.zs + `/live/login/captsms?mobile=${u}&captsms=${y}`)
        .then((res) => {
          if (res.data.success == true) {
            (this.mobile = ""),
              this.$message({
                message: "登录成功",
                type: "success",
                duration: 1000,
                offset: 320,
              });
            localStorage.setItem("token", res.data.data);
            this.$store.commit("setIsLogin", true);
            // location.reload()
            this.$router.push("/").catch((err) => {
              err;
            });
            this.isHide();
          } else {
            this.$message({
              message: res.data.msgDetail,
              type: "error",
              duration: 1000,
              offset: 320,
            });
          }
        });
    },
    // 手机找回密码提交按钮
    yx_submit2() {
      let u = this.yx_email;
      let p = this.yx_pswd;
      let p2 = this.yx_pswd2;
      let yzm = this.yx_yzm;
      let num = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      let mima = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
      if (!u || !p || !yzm || !p2) {
        this.$message({
          message: "内容不能为空",
          type: "error",
          duration: 1000,
          offset: 320,
        });
        return;
      }
      if (!num.test(u)) {
        this.$message({
          message: "邮箱格式有误,请重写,请重写",
          type: "error",
          duration: 1000,
          offset: 320,
        });
        this.yx_email = "";
        return;
      }
      if (!yzm) {
        // this.logpwd2_err = true;
        return;
      }
      if (!mima.test(p)) {
        this.$message({
          message: "长度为8-16位，必须包含数字字母",
          type: "error",
          duration: 1000,
          offset: 320,
        });
        this.yx_pswd = "";
        return;
      }
      if (p !== p2) {
        this.$message({
          message: "密码输入不一致",
          type: "error",
          duration: 1000,
          offset: 320,
        });

        this.yx_pswd2 = "";
        return;
      }
      this.$api
        .post(
          this.zs +
            `/live/forget/pwd/by/email?email=${this.yx_email}&newpwd=${this.yx_pswd}&captsms=${this.yx_yzm}`
        )
        .then((res) => {
          if (res.data.success == true) {
            this.yx_yzm = "";
            this.yx_email = "";
            this.yx_pswd = "";
            this.yx_pswd2 = "";
            this.$message({
              message: "修改密码成功,请登录",
              type: "success",
              duration: 1000,
              offset: 320,
            });
            this.upwd_show = false;
            this.isHide();
          } else {
            this.yx_yzm = "";
            this.$message({
              message: res.data.msgDetail,
              type: "error",
              duration: 1000,
              offset: 320,
            });
          }
        });
    },
    sj_submit() {
      var u = this.sj_mobile;
      var p = this.sj_pswd;
      var p2 = this.sj_pswd2;
      var yzm = this.sj_yzm;
      let num = /^[1]([3-9])[0-9]{9}$/;
      let mima = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
      if (!u || !p || !yzm || !p2) {
        this.$message({
          message: "内容不能为空",
          type: "error",
          duration: 1000,
          offset: 320,
        });
        return;
      }
      if (!num.test(u)) {
        this.$message({
          message: "电话号码,请重写",
          type: "error",
          duration: 1000,
          offset: 320,
        });
        this.sj_mobile = "";
        return;
      }
      if (!yzm) {
        // this.logpwd2_err = true;
        return;
      }
      if (!mima.test(p)) {
        this.$message({
          message: "长度为8-16位，必须包含数字字母",
          type: "error",
          duration: 1000,
          offset: 320,
        });
        this.sj_pswd = "";
        return;
      }
      if (p !== p2) {
        this.$message({
          message: "密码输入不一致",
          type: "error",
          duration: 1000,
          offset: 320,
        });

        this.sj_pswd2 = "";
        return;
      }
      this.$api
        .post(
          this.zs +
            "/live/forget/pwd/mobile?mobile=" +
            u +
            "&captsms=" +
            yzm +
            "&newpwd=" +
            p
        )
        .then((res) => {
          if (res.data.success == true) {
            this.sj_yzm = "";
            this.sj_mobile = "";
            this.sj_pswd = "";

            this.$message({
              message: "修改密码成功,请登录",
              type: "success",
              duration: 1000,
              offset: 320,
            });
            this.isHide();
            this.upwd_show = false;
          } else {
            this.sj_yzm = "";
            this.$message({
              message: res.data.msgDetail,
              type: "error",
              duration: 1000,
              offset: 320,
            });
          }
        });
    },
  },
};
</script>

<style scoped>
.yzm_blue {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.yzm_color {
  background: #bebebe;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.el-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.border-bottom {
  border-bottom: 3px solid blue;
  padding-bottom: 20px;
}
.el-dialog .speed_login {
  display: flex;
  font-size: 24px;
  justify-content: space-around;
  margin-bottom: 60px;
  margin-top: 40px;
}
.speed_login > p {
  cursor: pointer;
}
.el-dialog .uname {
  margin-bottom: 40px;
  box-sizing: border-box;
  position: relative;
}
.el-dialog .uname p,
.el-dialog .upwd p {
  position: absolute;
  bottom: -26px;
  left: 0px;
  color: red;
}
.el-dialog .upwd {
  margin-bottom: 44px;
  position: relative;
  display: flex;
}

#login .el-dialog__header {
  padding: 0px;
}

.el-popover {
  background: red !important;
}
.el-dialog__body {
  padding: 0px 20px;
}

.el-dialog__body li,
.el-dialog__body ul {
  padding: 0px;
  margin: 0px;
}
.el-dialog__body li {
  list-style: none;
}
.el-dialog__body .uname input,
.el-dialog__body .upwd input {
  padding-left: 70px;
  height: 45px;
  outline: none;
  border: 1px solid #ccc;

  box-sizing: border-box;
  width: 100%;
}
.el-dialog__body .uname input {
  background: url("../../assets/image/login/person.png") no-repeat 20px 5px;
}
.el-dialog__body .upwd input {
  background: url("../../assets/image/login/suo.png") no-repeat 20px 5px;
}
.el-dialog__body .forget {
  display: flex;
  justify-content: space-between;
  color: #8e8e8e;
}
.el-dialog__body .login_k,
.el-dialog__body .Retrieve_password_phone {
  width: 373px;
  margin: auto;
}
/*密码k */
.el-dialog__body .Retrieve_password_phone li input {
  width: 100%;
  height: 40px;
  margin-bottom: 15px;
  box-sizing: border-box;
  padding-left: 15px;
}
.el-dialog__body .Retrieve_password_phone li:nth-child(2) input {
  width: 65%;
}
p {
  padding: 0px;
  margin: 0px;
}
.el-dialog .button {
  text-align: center;
  line-height: 65px;
  margin-bottom: 30px;
}
.dl_bg {
  background: url("../../assets/image/ljbm.png") no-repeat;
  height: 65px;
  color: white;
  font-size: 24px;
  cursor: pointer;
}
.yzm {
  cursor: pointer;
  background: #0049cd;
  display: inline-block;
  height: 45px;
  margin-left: 5px;
  border-radius: 3px;
  width: 120px;
  text-align: center;
  color: white;
  line-height: 45px;
}
.forget > p {
  cursor: pointer;
}
.el-dialog .three {
  text-align: center;
  line-height: 34px;
  height: 34px;
  color: #8e8e8e;
  margin-bottom: 24px;
  background: url("../../assets/image/login/xian.png") no-repeat center;
}
.el-dialog .way {
  display: flex;
  justify-content: center;
}
.el-dialog .way li {
  margin-right: 43px;
}
.el-dialog .way li:last-child {
  margin-right: 0px;
}
#login >>> .el-dialog {
  width: 554px;
  height: 500px;
}
#login >>> .el-dialog__title {
  line-height: 24px;
  font-size: 24px !important;
  color: #333333;
}
#login >>> .el-dialog__header {
  padding: 0px;
}
#login >>> #login_k .el-dialog__title {
  margin-top: 55px;
  display: inline-block;
}
</style>
<style></style>
